<template>
  <view class="sendTypePop">
    <view class="title">承运类型</view>
    <view class="contant">
      <view class="row">
        <view class="block" :class="{actives:sendGoodsStore.sendType == '2'}" @click="chooseType('2')">普件</view>
        <view class="blocks" :class="{actives:sendGoodsStore.sendType == '1'}" @click="chooseType('1')">快件</view>
        <view class="block" :class="{actives:sendGoodsStore.sendType == '3'}" @click="chooseType('3')">整车</view>
      </view>
      <view class="row">
        <view class="block" :class="{actives:sendGoodsStore.sendType == '4'}" @click="chooseType('4')">560经济件</view>
        <view class="blocks" :class="{actives:sendGoodsStore.sendType == '5'}" @click="chooseType('5')">560商务件</view>
        <view class="block"  :class="{actives:sendGoodsStore.sendType == '6'}" @click="chooseType('6')">次日达</view>
      </view>
      <view class="row">
        <view class="block" :class="{actives:sendGoodsStore.sendType == '7'}" @click="chooseType('7')">隔日达</view>
      </view>
      <view class="xh">
        <view class="xh_row">
          <view class="xh_left">
            <view class="ss">是否加急</view>
          </view>
          <nut-switch v-model="sendGoodsStore.jj" :active-value="'1'" :inactive-value="'0'" active-color="#0966ff" />
        </view>
      </view>
    </view>
    <view class="foot">
      <view class="button" @click="sure">确 定</view>
    </view>
  </view>

</template>

<script lang="ts" setup>

import {useDidShow } from "@tarojs/taro";
import useSendGoodsStore from "../../store/sendGoods";
const sendGoodsStore = useSendGoodsStore();
function chooseType(index:string){
    sendGoodsStore.sendType = index
}
//初始化
useDidShow(() => {
  sendGoodsStore.sendType = "2";
  sendGoodsStore.jj = "0";
});
//确定
const emit = defineEmits<{
  (e: "closeSendTypePop", args: string);
}>();
function sure() {
    console.log('ss');
    
    emit('closeSendTypePop','1')
}
</script>
<style lang="scss">
.actives {
  border: 1px solid #0966ff !important;
  background: rgba(9, 102, 255, 0.05) !important;
  color: #0966ff !important;
}
.sendTypePop {
  .title {
    height: 112rpx;
    display: flex;
    align-items: center;
    margin-left: 24rpx;
    font-family: PingFangSC-Semibold;
    font-size: 32rpx;
    color: #252525;
    font-weight: 700;
  }
  .contant {
    height: calc(100% - 112rpx);
    width: 100%;
    overflow: auto;
    .row {
      width: 100%;
      height: 72rpx;
      padding: 0 24rpx;
      box-sizing: border-box;
      display: flex;
      margin-bottom: 24rpx;
      .block {
        width: 218rpx;
        height: 71px;
        border-radius: 88rpx;
        border: 1rpx solid rgba(0, 0, 0, 0.06);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .blocks{
        width: 218rpx;
        height: 71px;
        border-radius: 88rpx;
        border: 1rpx solid rgba(0, 0, 0, 0.06);
        margin: 0 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .xh {
      width: 100%;
      height: 136rpx;
      background: #f5f5f5;
      display: flex;
      align-items: center;
      .xh_row {
        width: 100%;
        height: 104rpx;
        background-color: white;
        padding: 0 24rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .xh_left {
          margin-left: 30rpx;
          display: flex;
          margin-right: 180rpx;
          .ss {
            font-family: PingFang SC Medium;
            font-size: 28rpx;

            color: #252525;
          }
          .ss1 {
            font-family: PingFang SC;
            font-size: 28rpx;

            color: #999999;
          }
        }
      }
    }
  }
  .foot {
    width: 100%;
    height: 128rpx;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    background: white;
    .button {
      width: 702rpx;
      height: 88rpx;
      border-radius: 200rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #0966ff;
      font-family: PingFang SC Medium;
      font-size: 32rpx;
      color: #ffffff;
    }
  }
}
</style>